<template>
  <m-box title="能耗管理" size="small" class="energy-management">
    <ul class="w-row">
      <li class="w-item" v-for="(e, i) in energy" :key="e.PARAM_DESC">
        <div class="w-item__title">{{ e.PARAM_DESC }}</div>
        <div class="w-item__content">
          <m-digital uom="度" :number="e.PARAM_VALUE * 1" :color="colors[i]" />
        </div>
      </li>
    </ul>
    <div class="m-content">
      <plat />
    </div>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { numberFormat } from '@/utils/tools'
import plat from '@/views/Home/components/energyManagement/plat/index.vue'

const energy = ref([])
const colors = ['#7FFF00', '#BA55D3']

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/getEnergyConsumptionReport')
    energy.value = res
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}

onMounted(() => {
  init()
})

// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.energy-management {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .dv-border-svg-container {
        display: none;
      }
      .border-box-content {
        height: 100%;
        position: relative;
        .w-row {
          height: 20px;
          display: flex;
          justify-content: center;
          padding-bottom: 5px;
          .w-item {
            flex: 1;
            vertical-align: baseline;
            text-align: center;
            .w-item__title {
              display: inline-block;
              padding: 0 10px;
              line-height: 20px;
            }
            .w-item__content {
              display: inline-block;
              position: relative;
              .m-digital {
                font-size: 16px;
                padding: 0;
              }
            }
          }
        }
        .m-content {
          height: calc(100% - 20px);
        }
      }
    }
  }
}
</style>
